import { Table } from 'antd'
import React from 'react'

export default function AntdTable() {
  //1. 准备数据
  let data = [
    {
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ]

  //2. 表格头的信息
  let columns = [
    {
      title: '姓名',
      dataIndex: 'name'   //数据源中对应的属性名
    },
    {
      title: '年龄',
      dataIndex: 'age'
    },
    {
      title: '住址',
      dataIndex: 'address'
    }
  ]

  return (
    <Table 
      //3. 设置 key 的列
      rowKey='name'
      dataSource={data}
      columns={columns}
      //边框
      bordered
      //分页设置
      pagination={{
        //总的数据条数
        total: 100,
        //每页显示条数
        pageSize: 20,
        //当前页码
        current: 3,
        //是否显示每页数量的选项
        pageSizeOptions: [2,5,10,20],
        showQuickJumper: true,
        //显示总数
        showTotal: (t) => {
          return <p>总数 {t} 条</p>
        }
      }}
    />
  )
}
